<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<template>
  <div class="data-summary-page" :class="{'fold-panel': !isPanelOpen}">
    <div id="map" class="map" ></div>
    <div class="page-header">
      <img class="banner" src="../../../public/images/bigScreen/header-img.png" alt=""/>
      <img src="../../../public/images/bigScreen/header-img1.png" alt=""/>
      <div class="title">可视化房产态势图</div>
      <div class="bottom-img">
        <img src="../../../public/images/bigScreen/header-img3.png" alt=""/>
      </div>
    </div>
    <!-- 校区及搜素 -->
    <!-- <div class="search-box">
      <el-autocomplete
        ref="searchBox"
        v-model="searchValue"
        placeholder="请输入楼栋名称"
        popper-class="build-suggest"
        :trigger-on-focus="false"
        :popper-append-to-body="false"
        :fetch-suggestions="querySearch"
        @select="handleSelect"
      >
        <el-select
          slot="prepend"
          v-model="campus"
          placeholder="请选择"
          :popper-append-to-body="false"
          @change="regionChange"
        >
          <el-option v-for="(item, index) in campusList" :key="index" :label="item.name" :value="item.id">{{ item.name
          }}</el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="queryBuilding" />
      </el-autocomplete>
    </div> -->
    <div class="close-btn" @click="closeSummary">
      <img src="../../../public/images/bigScreen/close.svg" alt=""/> 关闭
    </div>
    <div class="aside left-aside">
      <div class="top">
        <div class="circle green-circle"><img src="../../../public/images/bigScreen/green.png" alt=""/></div>
        <div class="circle orange-circle"><img src="../../../public/images/bigScreen/orange.png" alt=""/></div>
        <div class="title">全校概况</div>
        <div class="content-list">
          <ul>
            <li class="green">
              <div class="left">
                <img src="../../../public/images/bigScreen/lou.png" alt=""/>
                <div>楼栋总数</div>
              </div>
              <div class="middle">
                <!-- <count-to
                :start-val="0"
                :end-val="buildCount"
                :duration="2600"
                class="card-panel-num"/> -->
                {{ buildCount }}
              </div>
              <div class="right">栋</div>
            </li>
            <li class="oranage">
              <div class="left">
                <img src="../../../public/images/bigScreen/house.png" alt=""/>
                <div>房源总数</div>
              </div>
              <div class="middle green-border">
                <!-- <count-to :start-val="0" :end-val="houseCount" :duration="3000" class="card-panel-num" /> -->
                {{ houseCount }}
              </div>
              <div class="right">套</div>
            </li>
            <li class="green">
              <div class="left">
                <img src="../../../public/images/bigScreen/jzmj.png" alt=""/>
                <div>总建筑面积</div>
              </div>
              <div class="middle green-border">
                <!-- <count-to
                  :title="builtArea"
                  :start-val="0"
                  :end-val="builtArea"
                  :decimals="2"
                  :duration="3200"
                  class="card-panel-num"
                /> -->
                {{ builtArea }}
              </div>
              <div class="right">㎡</div>
            </li>
            <li class="oranage">
              <div class="left">
                <img src="../../../public/images/bigScreen/symj.png" alt=""/>
                <div>总使用面积</div>
              </div>
              <div class="middle green-border">
                <!-- <count-to
                  :title="usableArea"
                  :start-val="0"
                  :end-val="usableArea"
                  :decimals="2"
                  :duration="3600"
                  class="card-panel-num"
                /> -->
                {{ usableArea }}
              </div>
              <div class="right">㎡</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="left-bottom">
        <div class="top-point">
          <img src="../../../public/images/bigScreen/left-point.png" alt=""/>
          <img src="../../../public/images/bigScreen/right-point.png" alt=""/>
        </div>
        <div class="title">{{ campusName }}概况</div>
        <div class="content-list">
          <ul>
            <li class="green">
              <div class="left"><img src="../../../public/images/bigScreen/lou.png" alt=""/>楼栋总数</div>
              <div class="middle">
                <!-- <count-to :start-val="0" :end-val="campusCountData.buildCount" :duration="2600" class="card-panel-num" /> -->
                {{ campusCountData.buildCount }}
              </div>
              <div class="right">栋</div>
            </li>
            <li class="oranage">
              <div class="left">
                <img src="../../../public/images/bigScreen/house.png" alt=""/>房源总数
              </div>
              <div class="middle green-border">
                <!-- <count-to :start-val="0" :end-val="campusCountData.houseCount" :duration="3000" class="card-panel-num" /> -->
                {{ campusCountData.houseCount }}
              </div>
              <div class="right">套</div>
            </li>
            <li class="green">
              <div class="left">
                <img src="../../../public/images/bigScreen/jzmj.png" alt=""/>总建筑面积
              </div>
              <div class="middle green-border">
                <!-- <count-to :title="builtArea" :start-val="0" :end-val="campusCountData.builtArea" :decimals="2" :duration="3200" class="card-panel-num" /> -->
                {{ campusCountData.builtArea }}
              </div>
              <div class="right">㎡</div>
            </li>
            <li class="oranage">
              <div class="left">
                <img src="../../../public/images/bigScreen/symj.png" alt=""/>总使用面积
              </div>
              <div class="middle green-border">
                <!-- <count-to :title="usableArea" :start-val="0" :end-val="campusCountData.usableArea" :decimals="2" :duration="3600" class="card-panel-num" /> -->
                {{ campusCountData.usableArea }}
              </div>
              <div class="right">㎡</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="aside right-aside">
      <div class="right-top">
        <div class="title">各单位公房使用情况</div>
        <div class="tabBox">
          <el-table :data="tableData" border style="width: 100%" :highlight-current-row="true">
            <el-table-column type="index" label="排名" width="40" align="center">
              <template>
                {{ (page-1)*15 + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="deptName" label="使用单位" :show-overflow-tooltip="true" width="100" align="center" />
            <el-table-column prop="houseCount" label="房间数" width="75" align="center" />
            <el-table-column prop="builtArea" label="建筑面积" width="77" align="center">
              <!-- <template v-slot="scope">
                {{ scope.row.builtArea }}
                <span v-if="scope.row.builtArea">㎡</span>
              </template> -->
            </el-table-column>
            <el-table-column prop="usableArea" label="使用面积" width="77" align="center">
              <!-- <template v-slot="scope">
                {{ scope.row.usableArea }}
                <span v-if="scope.row.usableArea">㎡</span>
              </template> -->
            </el-table-column>
          </el-table>
          <div class="page-box">
            <el-pagination background :page-size="15" v-model:current-page="page" layout="prev, pager, next" :total="totalCount" @current-change="pageChange" />
          </div>
        </div>
      </div>
      <div class="right-bottom">
        <div class="right-circle">
          <img src="../../../public/images/bigScreen/right-circle.png" alt=""/>
        </div>
        <div class="content">
          <div class="scan-img"><img src="../../../public/images/bigScreen/scan.gif" alt=""/></div>
          <div class="title">房源利用率</div>
          <div class="tabBox">
            <el-table :data="usePerData" border style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column prop="rank" label="排名" width="40" align="center" />
              <el-table-column prop="houseName" label="房间名称" width="110" align="center" />
              <el-table-column :show-overflow-tooltip="true" prop="unit" label="使用单位" width="142" align="center" />
              <el-table-column prop="per" label="利用率" width="85" align="center" />
            </el-table>
            <div class="page-box">
              <el-pagination background v-model:current-page="usePerPage" :page-size="7" layout="prev, pager, next" :total="42" @current-change="usePerPageChange" />
            </div>
            <div class="legend">
              <span class="green"><img src="../../../public/images/bigScreen/green-light.svg" alt=""/>利用率合格</span>
              <span class="yellow"><img src="../../../public/images/bigScreen/yellow-light.svg" alt=""/>利用率过低</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-img">
      <div class="btn-div" @click="switchSurround">
        <span v-if="!isSurround">开启环绕</span>
        <span v-else>关闭环绕</span>
      </div>
      <span>经度：{{ lng }}°</span>
      <span>纬度：{{ lat }}°</span>
      <span>缩放级别：{{ zoom }}</span>
      <div class="btn-div" @click="isPanelOpen=!isPanelOpen">
        <span v-if="!isPanelOpen">展开面板</span>
        <span v-else>收起面板</span>
      </div>
    </div>
  </div>
</template>

<script>
// import CountTo from 'vue-count-to'
// import crudGlobalStat from '@/api/univ/global-stat'
// import regionsApi from '@/api/univ/region'
// import buildApi from '@/api/univ/build'
import mapboxgl from 'mapbox-gl'
import U from 'mapbox-gl-utils'
// import { pinYinSearch } from '@/utils/painYinSearch'
import axios from 'axios'
import { flashAnimatePoint } from './mappackag'
import * as turf from '@turf/turf'
import api from '../../api/geoserver'
import { Threebox, THREE } from 'threebox-plugin'
let kjStyle = null

export default {
  components: {
    // CountTo
  },
  data() {
    return {
      searchValue: '',
      campusList: [
        {
          id: 1,
          name: '主校区'
        },
        {
          id: 2,
          name: '南校区'
        },
        {
          id: 3,
          name: '北校区'
        },
        {
          id: 4,
          name: '东校区'
        }],
      campus: null,
      campusName: '',
      campusBuildList: [],
      houseCount: 0,
      buildCount: 0,
      builtArea: 0,
      usableArea: 0,
      campusCountData: {
        houseCount: 0,
        buildCount: 0,
        builtArea: 0,
        usableArea: 0
      },
      tableData: [],
      usePerData: [],
      usePerDataConst: [
        { rank: 1, unit: '党委教师工作部、人事处', houseName: '5016办公室', per: '98.65%' },
        { rank: 2, unit: '产业技术研究院', houseName: '7035办公室', per: '98.57%' },
        { rank: 3, unit: '国际教育学院', houseName: '4018办公室', per: '97.88%' },
        { rank: 4, unit: '信息化办公室 网络管理中心', houseName: '1013办公室', per: '97.56%' },
        { rank: 5, unit: '国际教育学院', houseName: '5019办公室', per: '96.85%' },
        { rank: 6, unit: '党委教师工作部、人事处', houseName: '8027办公室', per: '96.85%' },
        { rank: 7, unit: '党委组织部（党校）', houseName: '9005办公室', per: '96.77%' },
        { rank: 8, unit: '校长办公室(法制办公室)', houseName: '5020办公室', per: '96.36%' },
        { rank: 9, unit: '文献信息资源研究中心', houseName: '7028办公室', per: '89.53%' },
        { rank: 10, unit: '产业技术研究院', houseName: '4017办公室', per: '86.88%' },
        { rank: 11, unit: '国际教育学院', houseName: '7030办公室', per: '86.24%' },
        { rank: 12, unit: '产业技术研究院', houseName: '5018办公室', per: '85.74%' },
        { rank: 13, unit: '产业技术研究院', houseName: '7029办公室', per: '85.64%' },
        { rank: 14, unit: '党委办公室', houseName: '7031办公室', per: '84.63%' },
        { rank: 15, unit: '双一流大学会议中心', houseName: '1011办公室', per: '83.68%' },
        { rank: 16, unit: '校长办公室(法制办公室)', houseName: '1009办公室', per: '83.33%' },
        { rank: 17, unit: '党委办公室', houseName: '8025办公室', per: '79.86%' },
        { rank: 18, unit: '发展规划处', houseName: '8026办公室', per: '78.53%' },
        { rank: 19, unit: '信息化办公室 网络管理中心', houseName: '9006办公室', per: '76.88%' },
        { rank: 20, unit: '信息化办公室 网络管理中心', houseName: '4016办公室', per: '76.88%' },
        { rank: 21, unit: '党委组织部（党校）', houseName: '9007办公室', per: '75.88%' },
        { rank: 22, unit: '信息化办公室 网络管理中心', houseName: '8024办公室', per: '68.78%' },
        { rank: 23, unit: '校长办公室(法制办公室)', houseName: '9002办公室', per: '68.72%' },
        { rank: 24, unit: '国际教育学院', houseName: '9001办公室', per: '68.56%' },
        { rank: 25, unit: '党委组织部（党校）', houseName: '4015办公室', per: '67.88%' },
        { rank: 26, unit: '双一流大学会议中心', houseName: '9004办公室', per: '67.52%' },
        { rank: 27, unit: '党委办公室', houseName: '1010办公室', per: '63.61%' },
        { rank: 28, unit: '文献信息资源研究中心', houseName: '5017办公室', per: '63.12%' },
        { rank: 29, unit: '校长办公室(法制办公室)', houseName: '3006办公室', per: '56.89%' },
        { rank: 30, unit: '信息化办公室 网络管理中心', houseName: '3003办公室', per: '56.88%' },
        { rank: 31, unit: '党委办公室', houseName: '5014办公室', per: '56.23%' },
        { rank: 32, unit: '党委办公室', houseName: '9003办公室', per: '54.21%' },
        { rank: 33, unit: '发展规划处', houseName: '5015办公室', per: '53.78%' },
        { rank: 34, unit: '党委组织部（党校）', houseName: '8023办公室', per: '48.76%' },
        { rank: 35, unit: '国际教育学院', houseName: '3005办公室', per: '46.88%' },
        { rank: 36, unit: '党委组织部（党校）', houseName: '1012办公室', per: '45.82%' },
        { rank: 37, unit: '党委办公室', houseName: '8021办公室', per: '42.32%' },
        { rank: 38, unit: '产业技术研究院	', houseName: '3004办公室', per: '36.88%' },
        { rank: 39, unit: '信息化办公室 网络管理中心', houseName: '7034办公室', per: '36.87%' },
        { rank: 40, unit: '双一流大学会议中心', houseName: '7032办公室', per: '32.21%' },
        { rank: 41, unit: '双一流大学会议中心', houseName: '8022办公室', per: '31.56%' },
        { rank: 42, unit: '党委组织部（党校）', houseName: '7033办公室', per: '21.30%' }
      ],
      usePerPage: 1,
      page: 1,
      totalCount: 0,
      input3: '',
      select: '',
      map: null,
      popup: null,
      lng: 0,
      lat: 0,
      zoom: 16,
      isSurround: true, // 是否开启环绕
      isPanelOpen: true, // 左右面板是否展开
      intervalTimer: null,
      outtimeTimer: null,
      campusView: {
        '主校区': {
          center: [113.53012893764185, 34.816466800145236],
          zoom: 15,
          pitch: 47.33,
          bearing: -28
        },
        '南校区': {
          center: [113.63295994961288, 34.744340885711054],
          zoom: 16,
          pitch: 49.5,
          bearing: -25.6
        },
        '北校区': {
          center: [113.65673586733647, 34.78272639038292],
          zoom: 16.3,
          pitch: 44.52,
          bearing: 0
        },
        '东校区': {
          center: [113.64095604461335, 34.75210798218593],
          zoom: 16.4,
          pitch: 55.5,
          bearing: 0
        }
      },
      buildingData: null, // 建筑楼栋信息列表
      geoserverUrl: 'http://61.52.175.217:8081/geoserver', // geoserver地址
      lastTime: 0.0, // 旋转动画时间
      mapBearing: -28
    }
  },
  mounted() {
    // if (this.intervalTimer) {
    //   clearInterval(this.intervalTimer)
    // }
    // if (this.outtimeTimer) {
    //   clearTimeout(this.outtimeTimer)
    // }
    this.getMapStyle()
    this.queryRegionsList()
    this.getData()
    this.getUsePerData()
    this.getHouseRankTable()
    // const self = this
    // this.hasHandler()
    // window.addEventListener('click', function() {
    //   self.hasHandler()
    // })
  },
  unmounted() {
    this.map.remove()
    clearInterval(this.intervalTimer)
    clearTimeout(this.outtimeTimer)
  },
  methods: {
    async getMapStyle() {
      const style = await axios.get(import.meta.env.VITE_APP_PATH + 'config/dark-v11.json').catch((err) => console.log(err))
      kjStyle = style.data
      console.log('kjStyle', kjStyle)
      this.initMap()
    },
    hasHandler() {
      const self = this
      clearInterval(self.intervalTimer)
      clearTimeout(self.outtimeTimer)
      self.outtimeTimer = setTimeout(() => {
        self.intervalTimer = setInterval(() => {
          if (self.usePerPage === 6) {
            self.usePerPage = 1
          } else {
            self.usePerPage += 1
          }
          if (self.page === Math.ceil(self.totalCount / 15)) {
            self.page = 1
          } else {
            self.page += 1
          }
          self.getHouseRankTable()
          self.getUsePerData()
        }, 3000)
      }, 5000)
    },
    // 初始化地图
    initMap() {
      mapboxgl.accessToken = 'pk.eyJ1IjoibGlud2VpOTIxMjE5IiwiYSI6ImNrb2pwbnM5dTFpZ3UybnB3dHlnc2M3dGsifQ.XbmGjeu_6Fr9qByZQxsvkQ'

      const position = this.campusView['主校区']
      // 地图初始化
      this.map = new mapboxgl.Map({
        container: 'map',
        style: kjStyle,
        center: position.center,
        zoom: position.zoom,
        pitch: position.pitch,
        bearing: position.bearing
      })
      const that = this

      that.map.on('load', function() {
        // 初始化mapbox工具类
        U.init(that.map)
        // 请求贴图建筑数据
        that.addChartletLyer()
      })

      // 监听鼠标移动显示经纬度
      that.map.on('mousemove', (e) => {
        this.lng = e.lngLat.wrap().lng.toFixed(6)
        this.lat = e.lngLat.wrap().lat.toFixed(6)
      })
      // 监听地图缩放显示缩放级别
      that.map.on('zoom', (e) => {
        that.isSurround = false
        that.zoom = that.map.getZoom().toFixed(1)
      })
      // 监听鼠标按下事件--关闭地图环绕动画
      that.map.on('mousedown', (e) => {
        that.isSurround = false
      })
      window.requestAnimationFrame(that.frame)
    },
    // 设置地图视角
    setMapView(obj) {
      this.map.setCenter(obj.center)
      this.map.setZoom(obj.zoom)
      this.map.setPitch(obj.pitch)// 设置俯仰
      this.map.setBearing(obj.bearing)// 设置旋转角度
    },
    // 加载贴图建筑
    async addChartletLyer() {
      const parameter = {
        service: 'WFS',
        version: '1.0.0',
        request: 'GetFeature',
        maxFeatures: '10000',
        outputFormat: 'application/json',
        typeName: 'zzdx:building_simple'
      }
      const that = this
      that.buildingData = await api.getLayerData('zzdx', parameter).catch((err) => console.log(err))

      window.tb = new Threebox(that.map, that.map.getCanvas().getContext('webgl'), {
        defaultLights: true
      })

      that.map.addLayer({
        id: 'buildingkj',
        type: 'fill-extrusion', // 设置当前图层类型 此为边
        source: 'buildingkj',
        layout: {
        },
        paint: {
          // 设置属性
          'fill-extrusion-color': '#ffffff',
          'fill-extrusion-opacity': 0,
          'fill-extrusion-height': ['get', 'height']
        }
      })

      // 绑定弹出框
      that.map.U.clickLayer('buildingkj', (e) => {
        that.showPopupInfo(e)
      })

      that.map.addLayer({
        id: 'sqsfchartlet_layer',
        type: 'custom',
        renderingMode: '3d',
        onAdd: function(map, mbxContext) {
          that.addBuildings(that.buildingData.features)
        },
        render: function(gl, matrix) {
          window.tb.update()
        }
      })
      // 添加利用率闪光点
      that.addfclylLyer()
    },
    // 显示弹出框
    showPopupInfo(e) {
      if (this.popup) this.popup.remove()
      const name = e.features[0].properties.name
      const mapid = e.features[0].properties.mapid

      if (name) {
        // crudGlobalStat.queryByBuildId({ mapId: mapid }).then((res) => {
        //   const popupHtml2D = `<div class="popup-simple-img">
        //     <div class="loudong-name">${name}</div>
        //     <div class="info-hang">
        //       <span class="shuxing-name">房源总数</span>
        //       <span class="shuxing-value">${res.houseCount || 0} 套</span>
        //     </div>
        //     <div class="info-hang">
        //       <span class="shuxing-name">建筑面积</span>
        //       <span class="shuxing-value">${res.builtArea || 0} m²</span>
        //     </div>
        //     <div class="info-hang">
        //       <span class="shuxing-name">使用面积</span>
        //       <span class="shuxing-value">${res.usableArea || 0} m²</span>
        //     </div>
        //   </div>`
        //   const popup = new mapboxgl.Popup({
        //     className: 'map-kj-click-popup',
        //     maxWidth: '400px',
        //     closeButton: false,
        //     offset: [122, 0]
        //   }).setHTML(popupHtml2D)
        //   popup.setLngLat(e.lngLat).addTo(this.map)
        //   this.popup = popup
        // })
      }
      if (!e.prevent) e.preventDefault()
    },
    // 加载房产利用率闪光图标图层
    async addfclylLyer() {
      const that = this
      const width = 100
      const height = 300

      const pulsingDotGreen = flashAnimatePoint(width, height, '绿', that.map)

      that.map.addImage('pulsing-dot-green', pulsingDotGreen, { pixelRatio: 2 })

      const pulsingDotYellow = flashAnimatePoint(width, height, '黄', that.map)

      that.map.addImage('pulsing-dot-yellow', pulsingDotYellow, { pixelRatio: 2 })

      that.map.addLayer({
        'id': 'layer-with-pulsing-dot',
        'type': 'symbol',
        'source': 'fclyl',
        'layout': {
          'icon-image': [
            'case',
            ['==', ['get', 'lyl'], 1],
            'pulsing-dot-yellow',
            'pulsing-dot-green'
          ],
          'icon-offset': [0, -50]
        }
      })
    },
    // 批量生成贴图建筑
    addBuildings(data) {
      data.forEach((b) => {
        if (b.geometry) {
          if (b.geometry.coordinates) {
            // console.log('coordinates', b.geometry.coordinates)
            for (const coordinate of b.geometry.coordinates) {
              const polygon = turf.polygon([coordinate])
              const center = turf.centerOfMass(polygon).geometry.coordinates
              // eslint-disable-next-line no-undef
              const texture = new THREE.TextureLoader().load('/images/material/floors5.png')
              // eslint-disable-next-line no-undef
              texture.wrapS = texture.wrapT = THREE.RepeatWrapping
              texture.repeat.set(1, parseInt(b.properties.height / 8)) // 重复产生N个相同贴图 产生N行
              // texture.offset.set(0, 0.5)
              // eslint-disable-next-line no-undef
              const material1 = new THREE.MeshBasicMaterial({
                // color: '#999999',
                transparent: true,
                opacity: 0.7,
                map: texture
              })
              material1.color.offsetHSL(0, 0.5, 0.5)
              // eslint-disable-next-line no-undef
              const material = new THREE.MeshBasicMaterial({
                color: 'rgb(0,154,153)',
                transparent: true,
                opacity: 1
              })
              material.color.offsetHSL(0, 0.3, 0.3)
              const extrusion = window.tb.extrusion({
                coordinates: [coordinate],
                geometryOptions: { curveSegments: 1, bevelEnabled: false, depth: b.properties.height / 30 },
                materials: [material, material1]
              })
              // extrusion.addTooltip(b.properties.tooltip, true)
              extrusion.setCoords([center[0], center[1], 0])
              window.tb.add(extrusion)
            }
          }
        } else {
          console.log('coordinates', b)
        }
      })
    },
    // 地图环绕动画
    frame(time) {
      const elapsedTime = (time - this.lastTime) / 400.0
      // console.log(elapsedTime)
      if (elapsedTime < 1) {
        this.mapBearing = this.mapBearing + elapsedTime
        this.map.setBearing(this.mapBearing)
      }
      this.lastTime = time
      if (this.isSurround) window.requestAnimationFrame(this.frame)
    },
    // 获取校区选择列表
    queryRegionsList() {
      // const params = {
      //   status: 1
      // }
      // regionsApi.getAllSelectRegion(params).then(res => {
      //   this.campusList = res
      //   this.campus = res[0].id
      //   this.campusName = res[0].name
      //   this.getCampusData()
      //   this.getCampusBuildList()
      // })
      this.campus = 1
      this.campusName = '主校区'
      this.getCampusData()
      this.getCampusBuildList()
    },
    // 校区切换
    regionChange() {
      this.searchValue = ''
      this.$refs.searchBox.suggestions = [] // 清空建议列表
      this.getCampusData()
      this.getCampusBuildList()
      this.campusList.some((c) => {
        if (c.id === this.campus) {
          this.campusName = c.name
          this.setMapView(this.campusView[c.name])
          return true
        }
      })
    },
    // 根据校区获取楼栋
    getCampusBuildList() {
      const params = {
        regionId: this.campus
      }
      // buildApi.getAllSelectBuild(params).then(res => {
      //   if (res) {
      //     res.forEach(val => {
      //       val.value = val.label
      //     })
      //     this.campusBuildList = res
      //   } else {
      //     this.campusBuildList = []
      //   }
      // })
    },
    // 模糊查询获取结果列表
    querySearch(queryString, cb) {
      const results = pinYinSearch(this.campusBuildList, queryString, 'value')
      cb(results)
    },
    // 选择查询结果的楼栋
    handleSelect(data) {
      const that = this
      console.log(data)
      // 根据mapid查建筑，定位和显示弹出框
      this.isSurround = false
      setTimeout(() => {
        that.buildingData.features.some((bu) => {
          if (bu.properties.mapid === data.mapId) {
            console.log('=========', bu)
            const option = {
              padding: { top: 200, bottom: 200, left: 200, right: 200 },
              maxZoom: 19,
              pitch: 40
            }
            const line = turf.lineString(bu.geometry.coordinates[0])
            const center = turf.centerOfMass(turf.polygon(bu.geometry.coordinates))
            const lngLat = {
              lat: center.geometry.coordinates[1],
              lng: center.geometry.coordinates[0]
            }
            const popupData = {
              features: [bu],
              lngLat: lngLat,
              prevent: true
            }
            that.map.fitBounds(turf.bbox(line), option)
            that.showPopupInfo(popupData)
            return true
          }
        })
      }, 100)
    },
    // 获取全校房产概况
    getData(regionId = null) {
      // crudGlobalStat.queryAllCount({ regionId: regionId }).then((res) => {
      //   this.houseCount = res.houseCount
      //   this.buildCount = res.buildCount
      //   this.builtArea = res.builtArea
      //   this.usableArea = res.usableArea
      // })
      this.houseCount = 100
      this.buildCount = 1000
      this.builtArea = 5656
      this.usableArea = 453453
    },
    // 获取校区房产概况
    getCampusData() {
      // crudGlobalStat.queryByRegionId({ regionId: this.campus }).then((res) => {
      //   this.campusCountData.houseCount = res.houseCount
      //   this.campusCountData.buildCount = res.count
      //   this.campusCountData.builtArea = res.buildArea
      //   this.campusCountData.usableArea = res.usableArea
      // })
      this.campusCountData.houseCount = 12211
      this.campusCountData.buildCount = 12457
      this.campusCountData.builtArea = 56
      this.campusCountData.usableArea = 486
    },
    // 查询楼栋
    queryBuilding() {
      console.log(this.map.getCenter())
      console.log(this.map.getPitch())
      console.log(this.map.getBearing())
    },
    // 获取公房使用排名列表
    getHouseRankTable() {
      const params = {
        size: 15,
        page: this.page - 1
      }
      // crudGlobalStat.queryDeptStatResult(params).then(res => {
      //   this.totalCount = res.count
      //   const data = res.content
      //   if (data.length < 15) {
      //     const num = 15 - data.length
      //     for (let i = 0; i < num; i++) {
      //       data.push({ builtArea: '', deptName: '', houseCount: '', usableArea: '' })
      //     }
      //   }
      //   this.tableData = data
      // })
      this.tableData = []
    },
    pageChange(index) {
      this.$nextTick(() => {
        this.getHouseRankTable()
      })
    },
    // 获取房源利用率列表
    getUsePerData() {
      const arr = JSON.parse(JSON.stringify(this.usePerDataConst))
      const startIndex = (this.usePerPage - 1) * 7
      this.usePerData = arr.slice(startIndex, startIndex + 7)
    },
    // 房源利用率列表换页
    usePerPageChange(page) {
      this.$nextTick(() => {
        this.getUsePerData()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.per && parseFloat(row.per) >= 50) {
        return 'green-row'
      } else if (row.per && parseFloat(row.per) < 50) {
        return 'yellow-row'
      }
      return ''
    },
    closeSummary() {
      this.$router.replace({ path: '/realEstateBigScreen/home' })
    },
    // 切换环绕模式
    switchSurround() {
      this.isSurround = !this.isSurround
      if (this.isSurround) {
        this.mapBearing = this.map.getBearing()
        window.requestAnimationFrame(this.frame)
      }
    }
  }
}
</script>

<style lang="scss">
.data-summary-page {
  width: 100%;
  height: 100vh;
  background: #122044;
  position: relative;
  overflow: hidden;

  .map {
    width: 100%;
    height: 100%;
    // background: url(../../../public/images/bigScreen/map.png) no-repeat;
    // background-size: 100% 100%;
  }

  .page-header {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    padding-top: 10px;
    img { width: 100%; height: 8.5vh; }
    .banner { position: absolute; top: 0px; left: 0px;}

    .title {
      position: absolute;
      top: 0px;
      font-size: 42px;
      color: rgb(180, 253, 255);
      text-align: center;
      width: 100%;
      line-height: 8.5vh;
    }

    .bottom-img {
      position: absolute;
      width: 100%;
      bottom: -7px;
      text-align: center;

      img {
        height: 15px;
        width: auto;
        max-width: 37%;
      }

      animation: opacityGradient;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
  }

  .search-box {
    position: absolute;
    width: 420px;
    max-width: calc(100vw - 820px);
    height: 60px;
    top: 12vh;
    left: 0px;
    right: 0px;
    margin: auto;

    .el-input__inner {
      border-color: rgb(64, 149, 229);
      height: 44px;
      line-height: 44px;
      background-color: rgba(6, 78, 130, 0.72);
      border-width: 2px;
      color: #75f9fd;
      font-size: 18px;
    }

    input::input-placeholder {
      color: #75f9fd !important;
    }

    input::-webkit-input-placeholder {
      /* WebKit, Blink, Edge */
      color: #75f9fd;
    }

    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #75f9fd;
    }

    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #75f9fd;
    }

    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #75f9fd;
    }

    .el-select .el-input__inner {
      width: 100px;
      padding-right: 10px;
      text-align: center;
      color: #75f9fd !important;
    }

    .el-select .el-input__inner:hover {
      color: #75f9fd;
    }

    .el-select .el-input__suffix-inner {
      display: none;
    }

    .el-input-group__append,
    .el-input-group__prepend {
      background-color: rgba(6, 78, 130, 0.72);
      border-color: rgb(64, 149, 229);
      border-width: 2px;
    }

    .el-select-dropdown, .el-autocomplete-suggestion {
      background-color: rgba(6, 78, 130, 0.72);
      border-color: rgb(64, 149, 229);
      border-width: 2px;

      .el-select-dropdown__item {
        color: #fff;
      }

      .el-select-dropdown__item.selected {
        color: #75f9fd;
      }

      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover{
        background-color: rgb(64, 149, 229);
      }
    }

    .el-popper[x-placement^=bottom] .popper__arrow::after {
      border-bottom-color: rgb(64, 149, 229);
    }

    .el-popper[x-placement^=bottom] .popper__arrow {
      border-bottom-color: rgb(64, 149, 229);
    }

    .el-icon-search {
      font-size: 18px;
      color: #75f9fd;
    }
    .el-autocomplete-suggestion li{color: #fff;}
    .el-autocomplete-suggestion li:hover {
      background-color: rgb(64, 149, 229);
    }
  }

  .close-btn {
    position: absolute;
    height: 3.5vh;
    line-height: 3.5vh;
    width: auto;
    top: 1vh;
    right: 5px;
    color: #13eef5;
    font-size: 15px;
    background: rgba(50, 90, 90, 0.8);
    padding: 0px 6px;
    padding-right: 8px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;

    img {
      width: 3vh;
      vertical-align: middle;
      margin-right: 0px;
      position: relative;
      top: -1px;
    }
  }

  .aside {
    position: absolute;
    top: 5vh;
    height: calc(95vh - 10px);
    // width: 25%;
    width: 420px;
    border: 2px dashed rgba(23, 173, 178, 1);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 1.5vh 10px;
  }

  .left-aside {
    left: 5px;
    transition: all 0.4s;
    .title {
      color: #75f9fd;
      font-size: 18px;
      text-align: center;
      // font-weight: bold;
      line-height: 40px;
      letter-spacing: 1px;
      font-family: SourceHanSansSC-regular;
    }

    .top {
      height: 50vh;
      background: url(../../../public/images/bigScreen/left-top.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      padding-top: 3vh;

      .circle {
        position: absolute;
        top: 5px;
        width: 30px;
        height: 30px;

        img {
          width: 30px;
        }
      }

      .green-circle {
        left: 9px;
        animation-name: spinning;
        animation-timing-function: linear;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }

      .orange-circle {
        right: 9px;
        animation-name: spinning-reverse;
        animation-timing-function: linear;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }

      .content-list {
        margin-top: 3vh;

        ul {
          padding-left: 20px;

          li {
            display: flex;
            margin-bottom: 3.6vh;

            .left {
              font-size: 12px;
              text-align: center;

              img {
                height: 26px;
              }

              width: 70px;
              position: relative;
              right: -16px;
            }

            .middle {
              width: 210px;
              text-align: center;
              line-height: 50px;
              font-size: 28px;
              height: 6vh;
              line-height: 5.5vh;
              position: relative;
            }
            .middle::after {
              // div是你需要添加背景图片的盒子
              content: "";
              opacity: 0.6;
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
            }

            .right {
              line-height: 5.5vh;
              font-size: 20px;
              padding-left: 15px;
            }
          }

          li.green {
            color: #75F9FD;

            .middle {
              // color: #74E258;
              color: #08eeff;
              // background: url(../../../public/images/bigScreen/border.png) no-repeat;
              // background-size: 100% 100%;
            }
            .middle::after {
              // div是你需要添加背景图片的盒子
              background-image: url(../../../public/images/bigScreen/border.png); // 背景图片的路径
              background-size: 100% 100%;
            }
          }

          li.oranage {
            color: #F5C400;

            // .middle {
            //   background: url(../../../public/images/bigScreen/border2.png) no-repeat;
            //   background-size: 100% 100%;
            // }
            .middle::after {
              // div是你需要添加背景图片的盒子
              background-image: url(../../../public/images/bigScreen/border2.png); // 背景图片的路径
              background-size: 100% 100%;
            }
          }
        }
      }
    }

    .left-bottom {
      position: relative;
      margin-top: 1vh;
      height: calc(100% - 51vh);
      padding-top: 7vh;

      // background: url(../../../public/images/bigScreen/pop-bg.svg) no-repeat;
      // background-size: 100% 100%;
      .top-point {
        position: absolute;
        top: 1vh;
        left: -15px;
        width: 400px;

        img {
          width: calc(50% - 5px);
        }

        img:first-child {
          margin-right: 9px;
        }
      }

      .content-list {
        margin-top: 4vh;
        background: url(../../../public/images/bigScreen/left-bottom.png) no-repeat;
        background-size: 100% 100%;
        padding: 5px 50px;

        ul {
          padding: 0px;
          margin: 0px;

          li {
            display: flex;
            margin-bottom: 1vh;
            line-height: 4vh;

            .left {
              font-size: 12px;
              text-align: center;

              img {
                height: 26px;
                vertical-align: middle;
                position: relative;
                top: 1px;
                margin-right: 5px;
              }

              width: 100px;
              margin-right: 10px;
            }

            .middle {
              flex: 1;
              font-size: 22px;
            }

            .right {
              font-size: 16px;
              padding-left: 15px;
              width: 35px;
            }
          }

          li.green {
            color: #75F9FD;

            .middle {
              // color: #74E258;
              color: #08eeff;
            }
          }

          li.oranage {
            color: #F5C400;
          }

          li:last-child {
            margin-bottom: 0.5vh;
          }
        }
      }
    }

    .left-bottom::after {
      // div是你需要添加背景图片的盒子
      content: "";
      background-image: url(../../../public/images/bigScreen/pop-bg.svg); // 背景图片的路径
      background-size: 66%;
      opacity: 0.3;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }

  .right-aside {
    right: 5px;
    transition: all 0.4s;
    .right-top {
      height: 51vh;
      background: url(../../../public/images/bigScreen/right-top.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      padding: 0px 10px;
      padding-bottom: 0px;
      padding-left: 8px;

      .title {
        color: #75f9fd;
        font-size: 18px;
        padding-left: 43px;
        padding-top: 1.5vh;
        line-height: 3vh;
      }
    }

    .tabBox {
      padding-right: 8px;

      // margin-top: calc(1vh - 4px);
      .el-table {
        background: transparent;
        border-color: #13EEF5;
        width: 100%;
        border: none;

        table {
          border-color: #13EEF5;
        }

        tr {
          background-color: transparent;
          border-color: #13EEF5;
        }

        th {
          background-color: rgba(50, 90, 90, 0.8);
          color: #13EEF5;
          border-color: #13EEF5;
          padding: 0px;

          .cell {
            padding: 0px;
            font-size: 12px;
            line-height: calc(2.8vh - 2px);
          }
        }

        td {
          background-color: rgba(50, 90, 90, 0.8);
          color: #F2EEEE;
          border-color: #13EEF5;
          padding: 0px;

          .cell {
            padding: 0px;
            font-size: 12px;
            line-height: calc(2.8vh - 3.4px);
          }
        }

        tr:last-child td {
          border-bottom: none;
        }

        td:last-child,
        th:last-child {
          border-right: none;
        }
      }

      .el-table::before {
        width: 0px;
      }

      .el-table::after {
        background: transparent;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td{
        background-color: rgba(41, 62, 62, 0.8);
      }
    }

    .right-bottom {
      height: calc(41vh - 10px);
      position: relative;

      .right-circle {
        float: right;
        width: 120px;
        height: 120px;
        animation-name: spinning-reverse;
        animation-timing-function: linear;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        margin-right: 35px;

        img {
          width: 120px;
          height: 120px;
        }
      }

      .content {
        position: absolute;
        width: 100%;
        height: calc(41vh - 10px);
        background: url(../../../public/images/bigScreen/right-bottom.png) no-repeat;
        background-size: 100% calc(100% - 3vh);
        background-position: 0px 3vh;

        .scan-img {
          float: left;
          margin-left: 36px;
          height: calc(13.8vh - 30px);

          img {
            width: 90px;
            border-radius: 50%;
          }
        }

        .title {
          float: right;
          color: #75f9fd;
          font-size: 18px;
          padding-top: 35px;
          margin-right: 51px;
        }

        .tabBox {
          padding-left: 10px;

          .el-table {
            tr.green-row td {
              color: rgb(162, 239, 77);
            }

            tr.yellow-row td {
              color: rgb(252, 202, 0);
            }
          }

          .legend {
            position: absolute;
            bottom: 20px;
            left: 40px;
            width: 90%;

            span {
              display: inline-block;
              width: 49%;
              font-size: 14px;
              line-height: 5vh;

              img {
                width: 5vh;
                vertical-align: middle;
                margin-right: 5px;
              }
            }

            .green {
              color: rgb(162, 239, 77);
            }

            .yellow {
              color: rgba(252, 202, 0, 1);
            }
          }
        }
      }
    }

    .page-box {
      text-align: center;
      margin-top: 0.8vh;

      .el-pagination.is-background .btn-next,
      .el-pagination.is-background .btn-prev,
      .el-pagination.is-background .el-pager li {
        background-color: transparent;
        color: #fff;
        min-width: 24px;
        height: 24px;
        line-height: 24px;
        border: none;
      }

      .el-pager li {
        background-color: rgba(50, 90, 90, 1);
        color: #fff;
      }

      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #1e999d;
      }

      .el-pagination.is-background .btn-next.disabled,
      .el-pagination.is-background .btn-next:disabled,
      .el-pagination.is-background .btn-prev.disabled,
      .el-pagination.is-background .btn-prev:disabled,
      .el-pagination.is-background .el-pager li.disabled {
        color: #999;
      }
    }
  }

  .footer-img {
    position: absolute;
    bottom: 5px;
    width: calc(100vw - 840px);
    background: url(../../../public/images/bigScreen/bottom.png) no-repeat;
    background-size: 100%;
    text-align: center;
    color: #fff;
    padding-top: 28px;
    left: 420px;

    span {
      font-size: 12px;
      margin: 0px 10px;
    }
    .btn-div{
      display: inline-block;
      cursor: pointer;
    }
  }
}
.fold-panel.data-summary-page{
  .left-aside{
    left: -420px;
  }
  .right-aside{
    right: -420px;
  }
}

#map {
  .map-kj-click-popup {
    .mapboxgl-popup-content {
      width: 249px;
      height: 232px;
      background: url(../../../public/images/bigScreen/tkbg.png) no-repeat !important;
      background-size: 100% 100% !important;
      padding: 10px 10px 15px !important;
      color: #fff;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      pointer-events: none;

      .popup-simple-img {
        .loudong-name {
          color: rgb(4,218,219);
          // color: #F5C400;
          margin: 10px 0 10px 45px;
          font-size: 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info-hang {
          margin: 6px 0 0 50px;
          font-size: 14px;

          .shuxing-name {
            color: rgb(4,218,219);
            // color: #F5C400;
          }

          .shuxing-value {
            margin-left: 24px;
            color: #74E258;
            // color: #fff;
          }
        }
      }
    }

    .mapboxgl-popup-tip {
      display: none;
    }
  }
}

.mapboxgl-ctrl-bottom-left {
  display: none;
}

@keyframes opacityGradient {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

@keyframes spinning-reverse {
  0% {
    transform: rotate(359deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>
